<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <body>
        <ui:composition template="./templates/basetemplate.xhtml">
            <ui:define name="content">
                <h:form id="signupform" >
                    <div class="left">
                        <h1>#{msg.bodyText_h1}</h1>
                    </div>
                    <fieldset>
                        <legend>#{msg.bodyText_legend}</legend>
                        <table >
                            <tr>
                                
                                <td> <h:outputLabel value="#{msg.inputField_firstName}"></h:outputLabel></td>
                                <td> <p:inputText id="firstName" value="#{userHandler.firstName}" required="true" requiredMessage="Field is required">
                                        <p:ajax  update="fnameMsg" event="blur"/></p:inputText><br/>
                                   <h:message id="fnameMsg" styleClass="errorMsg" for="firstName" /></td>
                            </tr>
                            <tr>
                                <td><h:outputLabel value="#{msg.inputField_lastName}"></h:outputLabel><br/></td>
                                <td><p:inputText id="lastName" value="#{userHandler.lastName}" required="true" requiredMessage="Field is required">
                                     <p:ajax update="lnameMsg" event="blur"/></p:inputText><br/>
                                    <h:message id="lnameMsg" styleClass="errorMsg" for="lastName" /></td>                                
                            </tr>
                            <tr>                                
                                <td><h:outputLabel value="#{msg.inputField_email}"></h:outputLabel></td>
                                <td><p:inputText id="email" value="#{userHandler.email}" required="true" requiredMessage="Field is required" >
                                        <f:validator validatorId="com.digitaldiary.validator.EmailValidator" />
                                    <p:ajax update="emailMsg" event="blur"/></p:inputText><br/>
                                        <h:message id="emailMsg" styleClass="errorMsg" for="email" /></td>
                                
                          </tr>
                          <tr>
                                <td style="vertical-align: top"><h:outputLabel value="#{msg.inputField_gender}"></h:outputLabel></td>
                                <td><p:selectOneMenu  effect="fold" style="margin-bottom: -15px;" value="#{userHandler.gender}" id="gender" required="true" requiredMessage="Field is required">  
                                       <f:selectItem itemLabel="Select One" itemValue="" />  
                                       <f:selectItem itemLabel="Male" itemValue="1" />  
                                       <f:selectItem itemLabel="Female" itemValue="2" />  
                                    </p:selectOneMenu> <br/>
                                    <h:message styleClass="errorMsg" for="gender" /></td>
                            </tr>
                            <tr>                                  
                                 <td><h:outputLabel value="#{msg.inputField_dateOfBirth}"></h:outputLabel></td> 
                                 <td><p:inputMask   mask="99/99/9999"  id="dob" value="#{userHandler.dob}"   required="true" requiredMessage="Field is required">
                                        
                                         <f:validator validatorId="com.digitaldiary.validator.DobValidator"/></p:inputMask>
                                     <br/><h:message styleClass="errorMsg" for="dob" /></td>
                               
                            </tr>
                            <tr>
                                
                                <td><h:outputLabel value="#{msg.inputField_userName}"></h:outputLabel></td>
                                <td><p:inputText id="userName" value="#{userHandler.userName}" required="true" requiredMessage="Field is required">
                                        <f:validator validatorId="com.digitaldiary.validator.UserNameValidator" /></p:inputText>
                                    <br/><h:message styleClass="errorMsg" for="userName" /></td>
                                
                            </tr>
                                  <tr>
                              
                                <td><h:outputLabel value="#{msg.inputField_passowrd}"></h:outputLabel></td>
                                <td><p:password id="password1" value="#{userHandler.password1}" match="password2" required="true"  requiredMessage="Field is required">
                                    <f:validateLength minimum="6" maximum="20" /></p:password><br/>
                                    <h:message styleClass="errorMsg" for="password1" /></td>
                                
                            </tr>
                            <tr>
                                
                                <td><h:outputLabel value="#{msg.inputField_retypePassword}"></h:outputLabel></td>
                                <td><p:password id="password2" value="#{userHandler.password2}" required="true" requiredMessage="Field is required"></p:password><br/>
                                    <h:message styleClass="errorMsg" for="password2" /></td>
                                
                            </tr>
                            <tr>
                                
                                 <td><h:outputLabel value="#{msg.inputField_phoneNumber}"></h:outputLabel></td>
                                 <td><p:inputMask id="phoneNumber" value="#{userHandler.phoneNumber}" mask="99999-999999" required="true" requiredMessage="Field is required"></p:inputMask><br/>
                                     <h:message styleClass="errorMsg" for="phoneNumber" /></td>
                                
                            </tr>
                            <tr>
                                <td></td>
                                <td>
                                    <p:commandButton  styleClass="ui-button-text-icons ui-button-text" id="save" update="signupform" value="#{msg.submitText}" action="#{userHandler.saveUser()}" />
                                    <p:commandButton styleClass="ui-button-text-icons ui-button-text" value="#{msg.resetText}" type="reset"/> 
                                </td>
                            </tr>
                        </table>
                    </fieldset>
                </h:form>
            </ui:define>
         </ui:composition>
    </body>
</html>
